<template>
  <section id="portfolio" class="bg-light custom-padding animate__animated " data-animation="animate__fadeInUp">
    <div class="container">
      <div class="text-center mb-5">
        <h2 class="section-title">Our Portfolio</h2>
        <p class="text-muted">Showcasing some of our best work and darkful projects across different
          industries.</p>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project1.jpg" class="card-img" alt="Project 1">
            <div class="card-body p-4">
              <h5 class="card-title">Project 1</h5>
              <p class="card-text">A brief description of the project, highlighting the main
                technologies
                used and its business impact.</p>
              <a class='btn btn-outline-dark' href='project.html'>View
                Project</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project2.jpg" class="card-img" alt="Project 2">
            <div class="card-body p-4">
              <h5 class="card-title">Project 2</h5>
              <p class="card-text">Details about the project, the client's requirements, and the
                innovative solutions provided.</p>
              <a class='btn btn-outline-dark' href='project.html'>View Project</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project3.jpg" class="card-img" alt="Project 3">
            <div class="card-body p-4">
              <h5 class="card-title">Project 3</h5>
              <p class="card-text">An overview of this project, including key technologies used
                and
                the
                project's outcome.</p>
              <a class='btn btn-outline-dark' href='project.html'>View Project</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project4.jpg" class="card-img" alt="Project 4">
            <div class="card-body p-4">
              <h5 class="card-title">Project 4</h5>
              <p class="card-text">Summary of the project, including challenges faced and how they
                were
                overcome.</p>
              <a class='btn btn-outline-dark' href='project.html'>View Project</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project5.jpg" class="card-img" alt="Project 5">
            <div class="card-body p-4">
              <h5 class="card-title">Project 5</h5>
              <p class="card-text">Description of the project's key aspects, including unique
                solutions
                and its results.</p>
              <a class='btn btn-outline-dark' href='project.html'>View Project</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card h-100 shadow-sm border-0 animate__animated" data-animation="animate__fadeInUp">
            <img src="static/picture/project6.jpg" class="card-img" alt="Project 6">
            <div class="card-body p-4">
              <h5 class="card-title">Project 6</h5>
              <p class="card-text">Project details highlighting the technology stack and how the
                solution
                benefited the client.</p>
              <a class='btn btn-outline-dark' href='project.html'>View Project</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "OurPortfolio"
}
</script>


<style scoped>

</style>